import { memo } from "react";
import { Pagination } from "antd";
import { PaginationWapper } from "./style";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { fetchRoomListAction } from "@/store/modules/entire/actions";

const EntirePagination = memo(() => {
  const { totalCount, currentPage } = useSelector((state) => state.entire, { shallowEqual });
  const dispatch = useDispatch();

  const startCount = currentPage * 20 + 1;
  const endCount = (currentPage + 1) * 20;

  function handleChangePage(page) {
    // 回到顶部
    window.scroll(0, 0);
    dispatch(fetchRoomListAction(page));
  }

  return (
    <PaginationWapper>
      <Pagination current={currentPage} pageSize={20} total={totalCount} showSizeChanger={false} onChange={handleChangePage}></Pagination>
      <div className="desc">
        第{startCount}-{endCount}个房源，共超过{totalCount}个
      </div>
    </PaginationWapper>
  );
});

export default EntirePagination;
